<template>
  <a-row :gutter="16">
    <a-col :span="12">
      <a-statistic title="全校排名" :value="this.schoolRanking + '/' + this.schoolTotal" style="margin-right: 50px">
        <template #suffix>
          <a-icon v-if="schoolIcon == 1" type="like" style="color:#52c41a"/>
          <a-icon v-if="schoolIcon == 2" type="smile" style="color:#1890ff"/>
          <a-icon v-if="schoolIcon == 3" type="frown" style="color:#faad14"/>
        </template>
      </a-statistic>
    </a-col>
    <a-col :span="12">
      <a-statistic title="部门排名" :value="this.depRanking + '/' + this.depTotal" class="margin-left: 50px">
        <template #suffix>
          <a-icon v-if="depIcon == 1" type="like" style="color:#52c41a"/>
          <a-icon v-if="depIcon == 2" type="smile" style="color:#1890ff"/>
          <a-icon v-if="depIcon == 3" type="frown" style="color:#faad14"/>
        </template>
      </a-statistic>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: "teacherResultRanking",
  props: {
    schoolRanking: {
      type: String,
      default: 0,
      required: false
    },
    depRanking: {
      type: String,
      default: 0,
      required: false
    },
    schoolTotal: {
      type: String,
      default: 0,
      required: false
    },
    depTotal:{
      type: String,
      default: 0,
      required: false
    }
  },
  data(){

    return {

    }

  },
  computed:{
    schoolIcon: function(){
      let temp = this.schoolTotal/3;
      if(this.schoolRanking < temp){
        return 1;
      } else if(this.schoolRanking > temp*2){
        return 3;
      } else {
        return 2;
      }
    },
    depIcon: function(){
      let temp = this.depTotal/3;
      if(this.depRanking < temp){
        return 1;
      } else if(this.depRanking > temp*2){
        return 3;
      } else {
        return 2;
      }
    }
  }

}
</script>

<style scoped>

</style>